﻿function Gallery(element) {
    this.UI = new Object();
    this.UI.Wrapper = $(element).find('.gallery-wrapper');
    this.UI.UploadWrapper = $(element).find('.upload-holder');
    this.UI.Photos = this.UI.Wrapper.find('.photos');
    this.UI.FileInput = $(element).find('input[type=file]');
    this.UI.InputValue = $(element).find('input[type=hidden]');

    this.ColumnId = parseInt(this.UI.Wrapper.attr('data-column'));
    this.GroupId = parseInt(this.UI.Wrapper.attr('data-group'));
    this.RefGroupId = parseInt(this.UI.Wrapper.attr('data-refgroup'));

    var gallery = this;
    this.UI.Photos.data('gallery', gallery);
    this.UI.Wrapper.data('gallery', gallery);
    this.UI.FileInput.data('gallery', gallery);

    this.UI.FileInput.ajaxfileupload({
        'action': '/GalleryService.ashx',
        'params': {
            'column': gallery.ColumnId,
            'group': gallery.GroupId,
            'refgroup': gallery.RefGroupId
        },
        'onComplete': function (response) {
            var g = $(this).data('gallery');
            g.FileUploadComplete(response);
            g.HideUploadProgress();
        },
        'onStart': function () {
            var g = $(this).data('gallery');
            g.ShowUploadProgress();
        },
        'onCancel': function () {
            console.log('no file selected');
        }
    });
    this.AttachRemoveButton();
};

Gallery.prototype.AttachRemoveButton = function () {
    this.UI.Photos.find('.item').each(function () {
        var $item = $(this);
        if (!$item.data('gallery')) {
            $item.data('gallery', 1);
            var $a = $item.find('a');
            var $photos = $item.parent();
            $a.click(function () {
                $item.remove();
                $photos.data('gallery').RefreshValue();
            });
        }
    });
};

Gallery.prototype.FileUploadComplete = function (serverResponse) {
    var $newItem = this.UI.Photos.find('.item:last').clone();
    $newItem.removeData('gallery').attr('src', '').attr('data-id', serverResponse.RecordId);
    var $img = $newItem.find('img');
    $img.attr('alt', serverResponse.PhotoName);
    $img.attr('src', serverResponse.PhotoSrc);
    $newItem.appendTo(this.UI.Photos);
    $newItem.show();
    this.AttachRemoveButton();
    this.RefreshValue();
};

Gallery.prototype.ShowUploadProgress = function () {
    var gallery = this;
    var $uploadMask = $('<div class=\"uploadMask\" />');
    $uploadMask.css({
        width: '100%',
        height: gallery.UI.UploadWrapper.outerHeight() + 'px',
        lineHeight: gallery.UI.UploadWrapper.outerHeight() + 'px',
        textAlign: 'center',
        position: 'absolute',
        left: '0px',
        top: '0px',
        zIndex: '100',
        color: '#60D9D5',
        fontSize: '32px',
        backgroundColor: gallery.UI.UploadWrapper.css('background-color')
    });
    $uploadMask.text('Przesyłam zdjęcie');
    $uploadMask.appendTo(this.UI.UploadWrapper);
    this.UI.UploadWrapper.css('position', 'relative');
};

Gallery.prototype.HideUploadProgress = function () {
    this.UI.UploadWrapper.find('.button').text('Wybierz plik');
    this.UI.UploadWrapper.find('.file-name').text('');
    this.UI.UploadWrapper.find('.uploadMask').remove();
    this.UI.FileInput.val('');
};

Gallery.prototype.RefreshValue = function () {
    var values = new Array();
    this.UI.Photos.find('.item').each(function () {
        if ($(this).attr('data-id'))
            values.push($(this).attr('data-id'));
    });
    this.UI.InputValue.val(values.join(','));
};

$(function () {
    $('.gallery-wrapper').each(function () {
        new Gallery($(this).parent());
    });
});
